//退件销毁配置
<template>
  <div>
    <div style="margin:10px 0;">
      <a-button type="primary" @click="addRules">新增规则</a-button>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        size="small"
        :data-source="ruleData"
        :pagination="false"
        bordered
      >
        <a-table-column
          key="weight"
          data-index="weight"
          align="center"
          width="18%"
        >
          <span slot="title">重量范围</span>
          <template slot-scope="text, record">
            <div>
              {{ record.baseWeightLeft + "~" + record.baseWeightRight }}
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="baseWeightPrice"
          data-index="baseWeightPrice"
          align="center"
          width="18%"
        >
          <span slot="title">基础价格</span>
          <template slot-scope="text, record">
            <span>
              {{ record.baseWeightPrice }}
            </span>
          </template>
        </a-table-column>
        <a-table-column
          key="baseWeightUnit"
          data-index="baseWeightUnit"
          align="center"
          width="20%"
        >
          <span slot="title">单位</span>
          <template slot-scope="text, record">
            <span>
              {{ record.baseWeightUnit }}
            </span>
          </template>
        </a-table-column>
        <a-table-column
          key="createTime"
          data-index="createTime"
          align="center"
          width="18%"
        >
          <span slot="title">创建时间</span>
          <template slot-scope="text, record">
            <div>
              {{ record.createTime }}
            </div>
          </template>
        </a-table-column>
        <!-- 操作 -->
        <a-table-column key="operation" data-index="operation" align="center">
          <span slot="title">操作</span>
          <template slot-scope="text, record">
            <a
              @click="editRules('look', record)"
              href="javascript:;"
              v-if="record.count != null"
              style="color:#0000bf;border-bottom:1px solid #0000bf;"
              >已应用</a
            >
            <a
              href="javascript:;"
              @click="editRules('edit', record)"
              v-if="record.count == null"
              style="color:#0000bf;border-bottom:1px solid #0000bf;"
              >编辑</a
            >
            <a-divider type="vertical" v-if="record.count == null" />
            <a-popconfirm
              title="是否要删除?"
              ok-text="是"
              cancel-text="取消"
              v-if="record.count == null"
              @confirm="e => onDelete(e, record)"
            >
              <a
                href="javascript:;"
                style="color:#f00;border-bottom:1px solid #f00;"
                >删除</a
              >
            </a-popconfirm>
          </template>
        </a-table-column>
      </a-table>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              total => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              props => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchData.current"
            :total="total * 1"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </a-spin>
    <a-modal v-model="visible" :title="GuideTit" width="45%" @cancel="cancel">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="cancel"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >

        <a-button
          :loading="loading"
          type="primary"
          @click="sureADDRules"
          v-if="formData.count == null"
          >确认</a-button
        >
      </template>
      <a-form-model
        ref="ruleForm"
        :model="formData"
        :rules="formRules"
        class="add-form"
      >
        <a-form-model-item label="基础重量" style=" width:50%;margin-bottom:0;">
          <a-form-model-item prop="baseWeightLeft">
            <a-input
            :maxLength="128"
              v-model="formData.baseWeightLeft"
              placeholder="基础重量"
              :disabled="formData.count != null"
            ></a-input>
          </a-form-model-item>
          <span style="margin:0 5px;">
            ~
          </span>
          <a-form-model-item prop="baseWeightRight">
            <a-input
            :maxLength="128"
              v-model="formData.baseWeightRight"
              placeholder="基础重量"
              :disabled="formData.count != null"
            ></a-input>
          </a-form-model-item>
        </a-form-model-item>
        <a-form-model-item
          prop="baseWeightUnit"
          label="单位："
          style="width:50%;"
        >
          <a-select
            style="width:100%"
            show-search
            :disabled="formData.count != null"
            option-filter-prop="children"
            v-model="formData.baseWeightUnit"
            allowClear
            placeholder="基础重量单位"
          >
            <a-select-option
              :value="item.value"
              v-for="item in convers"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item prop="baseWeightPrice" label="基础价格：">
          <a-input-number
            placeholder="基础价格"
            style="width:100%"
            v-model="formData.baseWeightPrice"
            :disabled="formData.count != null"
            :formatter="
              value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            "
            :parser="value => `${value}`.replace(/\$\s?|(,*)/g, '')"
            :precision="2"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {
  config_searchTabList,
  destroy_addWareRules,
  destroy_editWareRules
} from "@/apis/system/setManage/setRules";
export default {
  data() {
    return {
      GuideTit: "新增规则",
      loading: false,
      //表单字段
      formData: {
        baseWeightPrice: null,
        baseWeightLeft: null,
        baseWeightRight: null,
        baseWeightUnit: undefined,
        overweight: null,
        overweightUnit: undefined,
        overweightPrice: null,
        additionalHandlePrice: null,
        additionalHandleUnit: undefined,
        internationalPrice: null,
        internationalUnit: undefined,
        compositePrice: null,
        compositeUnit: undefined,
        firstPrice: null,
        firstUnit: undefined
      },
      //表单规则
      formRules: {
        baseWeightPrice: [
          { required: true, message: "请填写基础价格!", trigger: "blur" }
        ]
      },
      visible: false,
      //单位数组
      convers: [
        { value: "0", label: "单" },
        { value: "1", label: "个" },
        { value: "2", label: "年" },
        { value: "3", label: "箱" },
        { value: "4", label: "拖" },
        { value: "5", label: "箱+拖" },
        { value: "6", label: "件" },
        { value: "7", label: "张" },
        { value: "8", label: "立方厘米" },
        { value: "9", label: "立方米" },
        { value: "10", label: "G" },
        { value: "11", label: "KG" },
        { value: "12", label: "LB" },
        { value: "13", label: "inch" },
        { value: "14", label: "cm" },
        { value: "15", label: "m" },
        { value: "16", label: "oz" },
        { value: "17", label: "柜" }
      ],
      styleNo: {
        border: "1px solid #f00",
        borderRadius: "5px"
      },
      styleYes: {
        border: "1px solid #ccc",
        borderRadius: "5px"
      },
      spinning: false,
      //列表数据
      ruleData: [],
      //查询数据
      searchData: {
        size: 10,
        current: 1
      },
      //条数
      total: 5
    };
  },
  mounted() {
    this.getTabList();
  },
  methods: {
    //查询表格数据
    async getTabList() {
      this.spinning = true;
      let res = await config_searchTabList(10, this.searchData);
      if (res.code == "200") {
        this.ruleData = res.responseBody.records;
        this.ruleData.forEach(item => {
          if (item.baseWeightUnit == 0) {
            item.baseWeightUnit = "单";
          } else if (item.baseWeightUnit == 1) {
            item.baseWeightUnit = "个";
          } else if (item.baseWeightUnit == 2) {
            item.baseWeightUnit = "年";
          } else if (item.baseWeightUnit == 3) {
            item.baseWeightUnit = "箱";
          } else if (item.baseWeightUnit == 4) {
            item.baseWeightUnit = "拖";
          } else if (item.baseWeightUnit == 5) {
            item.baseWeightUnit = "箱+拖";
          } else if (item.baseWeightUnit == 6) {
            item.baseWeightUnit = "件";
          } else if (item.baseWeightUnit == 7) {
            item.baseWeightUnit = "张";
          } else if (item.baseWeightUnit == 8) {
            item.baseWeightUnit = "立方厘米";
          } else if (item.baseWeightUnit == 9) {
            item.baseWeightUnit = "立方米";
          } else if (item.baseWeightUnit == 10) {
            item.baseWeightUnit = "G";
          } else if (item.baseWeightUnit == 11) {
            item.baseWeightUnit = "KG";
          } else if (item.baseWeightUnit == 12) {
            item.baseWeightUnit = "LB";
          } else if (item.baseWeightUnit == 13) {
            item.baseWeightUnit = "inch";
          } else if (item.baseWeightUnit == 14) {
            item.baseWeightUnit = "cm";
          } else if (item.baseWeightUnit == 15) {
            item.baseWeightUnit = "m";
          } else if (item.baseWeightUnit == 16) {
            item.baseWeightUnit = "oz";
          } else if (item.baseWeightUnit == 17) {
            item.baseWeightUnit = "柜";
          }
        });
        this.searchData.size = res.responseBody.size * 1;
        this.total = res.responseBody.total * 1;
        this.spinning = false;
      }
    },
    //新增规则按钮
    addRules() {
      this.GuideTit = "新增规则";
      this.formData = {
        baseWeightPrice: null,
        baseWeightLeft: null,
        baseWeightRight: null,
        baseWeightUnit: undefined,
        overweight: null,
        overweightUnit: undefined,
        overweightPrice: null,
        additionalHandlePrice: null,
        additionalHandleUnit: undefined,
        internationalPrice: null,
        internationalUnit: undefined,
        compositePrice: null,
        compositeUnit: undefined,
        firstPrice: null,
        firstUnit: undefined
      };
      this.visible = true;
    },
    //编辑单条规则
    editRules(flag, record) {
      if (flag == "look") {
        this.formData = JSON.parse(JSON.stringify(record));
        this.GuideTit = "查看规则";
        this.visible = true;
      } else if (flag == "edit") {
        this.GuideTit = "编辑规则";
        this.formData = JSON.parse(JSON.stringify(record));
        this.formData.isEdit = true;
        this.visible = true;
      }
    },
    //删除已保存的规则
    async onDelete(e, record) {
      let res = await destroy_editWareRules(record.sysReturnDestroyRuleId, {
        isDelete: 1
      });
      if (res.code == "10000") {
        this.getTabList();
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber * 1;
      this.getTabList();
    },
    //页码变更
    showChange(current, size) {
      this.searchData.current = current * 1;
      this.searchData.size = size * 1;
      this.getTabList();
    },
    //关闭模态框
    cancel() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
      this.formData = {
        baseWeightPrice: null,
        baseWeightLeft: null,
        baseWeightRight: null,
        baseWeightUnit: undefined,
        overweight: null,
        overweightUnit: undefined,
        overweightPrice: null,
        additionalHandlePrice: null,
        additionalHandleUnit: undefined,
        internationalPrice: null,
        internationalUnit: undefined,
        compositePrice: null,
        compositeUnit: undefined,
        firstPrice: null,
        firstUnit: undefined
      };
    },
    //确认按钮
    sureADDRules() {
      this.loading = true;
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.formData.isEdit) {
            let obj = JSON.parse(JSON.stringify(this.formData));
            if (obj.baseWeightUnit == "单") {
              obj.baseWeightUnit = 0;
            } else if (obj.baseWeightUnit == "个") {
              obj.baseWeightUnit = 1;
            } else if (obj.baseWeightUnit == "年") {
              obj.baseWeightUnit = 2;
            } else if (obj.baseWeightUnit == "箱") {
              obj.baseWeightUnit = 3;
            } else if (obj.baseWeightUnit == "拖") {
              obj.baseWeightUnit = 4;
            } else if (obj.baseWeightUnit == "箱+拖") {
              obj.baseWeightUnit = 5;
            } else if (obj.baseWeightUnit == "件") {
              obj.baseWeightUnit = 6;
            } else if (obj.baseWeightUnit == "张") {
              obj.baseWeightUnit = 7;
            } else if (obj.baseWeightUnit == "立方厘米") {
              obj.baseWeightUnit = 8;
            } else if (obj.baseWeightUnit == "立方米") {
              obj.baseWeightUnit = 9;
            } else if (obj.baseWeightUnit == "G") {
              obj.baseWeightUnit = 10;
            } else if (obj.baseWeightUnit == "KG") {
              obj.baseWeightUnit = 11;
            } else if (obj.baseWeightUnit == "LB") {
              obj.baseWeightUnit = 12;
            } else if (obj.baseWeightUnit == "inch") {
              obj.baseWeightUnit = 13;
            } else if (obj.baseWeightUnit == "cm") {
              obj.baseWeightUnit = 14;
            } else if (obj.baseWeightUnit == "m") {
              obj.baseWeightUnit = 15;
            } else if (obj.baseWeightUnit == "oz") {
              obj.baseWeightUnit = 16;
            }
            let res = await destroy_editWareRules(
              this.formData.sysReturnDestroyRuleId,
              obj
            );
            if (res.code == "10000") {
              this.loading = false;
              this.cancel();
              this.getTabList();
            }
          } else {
            let res = await destroy_addWareRules(this.formData);
            if (res.code == "10000") {
              this.loading = false;
              this.cancel();
              this.getTabList();
            }
          }
        } else {
          this.loading = false;
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.add-form {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10%;
  align-items: center;
  .ant-form-item {
    display: flex;
    width: 100%;
    .ant-form-item-label {
      width: 110px !important;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      .ant-form-item-children {
        display: flex;
      }
    }
  }
}
/deep/.ant-modal-footer {
  display: flex;
  justify-content: center;
}
</style>
